<template>
  <div class="box">
        <TopSearch
      @searchHeader="searchHeader"
      @delsHeader="delsHeader"
      @addHeader="addHeader"
      :control="control"
      :controlPosition="[]"
      :positionName="''"
      :disabled="disabled"
      :delsable="delsable"
      :searchConfig="setFormConfig"
    />
    <ProTable
      ref="protable"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="rowControl"
      :elProps="elProps"
      :controlWidth="controlWidth"
      @row-control-click="onRowControlClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
      @select-click="selectClick"
      @select-all="selectAll"
    >
    </ProTable> 
    <addEdit ref="AddEditref" :list="list" :echo="echo" @update="update"></addEdit>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { role, ruleApi, delRole } from "@/http/index.js";
import { elProps,controlWidth,setFormConfig } from "./index.js";
import { messageBox ,message,loading,closeLoading} from "@/common/function.js";
import addEdit from './addEdit.vue'

const echo = ref({})
const disabled = ["dels"];
const delsable = ref(true);
const control = ["search", "dels", "add"];
// const buttonType = ref('')
const AddEditref = ref('')
// 表格行内操作按钮
const rowControl = ["rowedit", "rowdel"];

const column = {
  role_name: "角色名稱",
  tabstatus:'狀態',
  tabsellstatus:'銷售狀態',
  tabcoursestatus:'授課狀態',
  create_time: "創建時間",
  update_time:'修改時間',

};

const list = ref([]);
const rule = async () => {
  const data = await ruleApi();
  if (data.code == 200) {
    list.value = data.data.list;
  }
};
const role_name = ref("");
const onRowControlClick = ({ scope: { row }, type }) => {
  console.log(row);
  role_name.value = row.role_name;
  // 编辑权限
  if (type == "rowedit") {
    AddEditref.value.buttonType = 'edit'
    const {id,role_name,status,sellstatus,coursestatus,rule_id} = row
    echo.value = {id,role_name,status,sellstatus,coursestatus}
    echo.value.rule_id = rule_id.split(",").map(Number);
    console.log(echo);
    rule();
    AddEditref.value.drawerValue = true;
    // defaultRule_id.value = row.rule_id.split(",").map(Number);
  }
  if (type == "rowdel") {
    messageBox().then(async () => {
        const data = await delRole(row.id);
        console.log(data);
        if (data.code == 200) {
          sale();
        }
      }).catch(() => {
        
      });
  }
};
const addHeader = async() => {
  echo.value = {
    role_name: "",
    status:'',
    sellstatus:'',
    coursestatus:'',
    rule_id:[]
  }
  delete echo.id
  rule();
  AddEditref.value.buttonType = 'add'
  AddEditref.value.drawerValue = true;
    console.log('addHeader');
};
const searchHeader = (e, type) => {
    Object.assign(obj, e);
    sale()
};
const delsHeader = () => {
    console.log('delsHeader',ids.value);
        messageBox().then(async () => {
        const data = await delRole(ids.value);
        if (data.code == 200) {
          sale();
          delsable.value = true
        }
      }).catch(() => {});
};
const ids = ref([])
const protable = ref('')
const onSelectionChange = (row) => {
};
const selectClick = (row)=>{
    let del_row = row.filter(e=>e.role_name =='超級管理員')
    if (del_row.length >0 ) {
        protable.value.multipleTableRef.toggleRowSelection(del_row[0], false)
    message('超級管理員不可編輯','warning')
    }
    let del_rows = row.filter(e=>e.role_name !='超級管理員')
        let id = []
        del_rows.map(e=>{
          id.push(e.id)
        })
        ids.value = id.toString()
         delsable.value = del_rows.length === 0;
}
let type = ref(true)
const selectAll = (row)=>{
  if (type.value) {
    let del_row = row.filter(e=>e.role_name =='超級管理員')
    protable.value.multipleTableRef.toggleRowSelection(del_row[0], false)
    type.value = false
        let del_rows = row.filter(e=>e.role_name !='超級管理員')
        let id = []
        del_rows.map(e=>{
          id.push(e.id)
        })
        ids.value = id.toString()
          delsable.value = del_rows.length === 0;
  }else{
    protable.value.multipleTableRef.clearSelection()
        type.value = true
        delsable.value = true
  }
}
const pageRefresh = () => {
      sale();
};
const onPageChange = async({e, type}) => {
  console.log(e, type);
    if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await sale()
};

const tableData = ref([]);
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 10, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
const obj = reactive({
  page: page.current_page,
  limit: page.per_page,
  name: "",
  status: "",
  time: "",
})
const sale = async () => {
  loading()
  const data = await role(obj);
  data.data.data.map(e=>{
    e.status ==1 ? e.tabstatus = '正常' :  e.tabstatus = '禁用'
    e.sellstatus ==1 ? e.tabsellstatus = '可銷售' : e.tabsellstatus = '不可銷售'
    e.coursestatus ==1 ? e.tabcoursestatus = '可授課' :e.tabcoursestatus =  '不可授課'
  })
  if (data.code == 200) {
    tableData.value = data.data.data;
  }
  closeLoading()
};
const update = ()=>{
    sale();
}
onMounted(() => {
  sale();

});
</script>

<style lang='less'  scoped>
.box {
  padding: 30px 33px;
}
</style>